<template>
  <div class="search" :class="{active: !caret}">
    <div v-for="(item, index) in searData" :key="index" class="hang">
      <span v-if="index<conceal">
        <el-select v-model="item.fenglish" class="select1" size="mini" filterable @change="gatherData(item, 'clear')">
          <el-option
            v-for="iten in options"
            :key="iten.fenglish"
            :label="iten.fdisplay"
            :value="iten.fenglish"
          />
        </el-select>
        <el-select v-model="item.fid" class="select2" size="mini" filterable @change="gatherData(item)">
          <el-option
            v-for="iten in bjfhData"
            :key="iten.code"
            :label="iten.desc"
            :value="iten.code"
          />
        </el-select>
        <!-- 日期  :picker-options="pickerOptions" -->
        <el-date-picker
          v-if="format.includes(item.fenglish)"
          v-model.trim="item.val"
          type="date"
          value-format="yyyy-MM-dd"
          size="mini"
          @keyup.enter.native="handleSearch"
          @blur="gatherData()"
          @change="gatherData()"
        />
        <!-- 日期-->
        <el-date-picker
          v-else-if="formatLog.includes(item.fenglish)"
          v-model.trim="item.val"
          type="date"
          value-format="yyyy-MM-dd"
          size="mini"
          @keyup.enter.native="handleSearch"
          @blur="gatherData()"
          @change="gatherData()"
        />
        <el-date-picker
          v-else-if="item.fenglish==='period'"
          v-model.trim="item.val"
          type="month"
          value-format="yyyy-MM"
          size="mini"
          @keyup.enter.native="handleSearch"
          @blur="gatherData()"
          @change="gatherData()"
        />
        <!--审核状态-->
        <el-select
          v-else-if="item.fenglish === 'fdocumentStatus' ||
            item.fenglish === 'fdocument' || item.fenglish === 'fdocumentstatus'"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData()"
        >
          <el-option
            v-for="iten in fstatus"
            :key="iten.label"
            :label="iten.label"
            :value="iten.val"
          />
        </el-select>
        <!--是否外购-->
        <el-select
          v-else-if="item.fenglish === 'isOutsourcing'"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData(item, 0)"
        >
          <el-option :label="$t('market.all')" value="" />
          <el-option :label="$t('market.yes')" value="1" />
          <el-option :label="$t('market.no')" value="0" />
        </el-select>
        <!--冻结状态-->
        <el-select
          v-else-if="item.fenglish === 'frozenstatus'"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData(item, 0)"
        >
          <el-option :label="$t('market.all')" value="" />
          <el-option :label="$t('market.normal')" value="A" />
          <el-option :label="$t('btn.freeze')" value="B" />
        </el-select>
        <!--处理进度-->
        <el-select
          v-else-if="item.fenglish === 'fisfinished'"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData(item, 0)"
        >
          <el-option :label="$t('market.all')" value="" />
          <el-option :label="$t('market.accomplish')" value="1" />
          <el-option :label="$t('market.calculating')" value="0" />
        </el-select>
        <!--处理结果-->
        <el-select
          v-else-if="item.fenglish === 'fissuccess' || item.fenglish === 'isSuccess'"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData(item, 0)"
        >
          <el-option :label="$t('market.all')" value="" />
          <el-option :label="$t('market.succeed')" value="1" />
          <el-option :label="$t('market.defeated')" value="0" />
        </el-select>
        <!--禁用状态-->
        <el-select
          v-else-if="closedisab.includes(item.fenglish)"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData(item)"
        >
          <el-option :label="$t('market.all')" value="" />
          <el-option :label="$t('market.normal')" value="A" />
          <el-option :label="$t('market.hasDisab') + '/' +$t('market.closed')" value="B" />
        </el-select>
        <!--禁用状态-->
        <el-select
          v-else-if="item.fenglish === 'purchaserStatus'"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData(item)"
        >
          <el-option :label="$t('market.all')" value="2" />
          <el-option :label="$t('market.normal')" value="1" />
          <el-option :label="$t('market.lateDeli')" value="0" />
        </el-select>
        <!--采购申请列表 -- 状态-->
        <el-select
          v-else-if="item.fenglish === 'purchaseStatus'"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData(item)"
        >
          <el-option :label="$t('market.all')" value="" />
          <el-option :label="$t('market.forwarded')" value="已转" />
          <el-option :label="$t('market.unconverted')" value="未转" />
        </el-select>
        <!--单据类型-->
        <el-select
          v-else-if="item.fenglish === 'billType'"
          v-model="item.val"
          size="mini"
          class="selectStus"
          @keyup.enter.native="handleSearch"
          @change="gatherData(item)"
        >
          <el-option v-for="ite in billtypeData" :key="ite.billtype" :label="ite.billName" :value="ite.billtype" />
        </el-select>
        <el-input
          v-else
          v-model.trim="item.val"
          v-focus
          size="mini"
          autocomplete="off"
          @keyup.enter.native="handleSearch"
          @blur="gatherData()"
          @change="clearData"
        />
        <i v-if="index>0" class="el-icon-remove-outline" @click="delSear(index)" />
      </span>
    </div>
    <div v-show="!caret" class="newSear" @click="newSearch">
      <i class="el-icon-circle-plus-outline" />
      <!-- 新增条件 -->
      {{ $t('btn.conditions') }}
    </div>
    <div class="posit">
      <i v-show="caret" class="el-icon-d-arrow-left" @click="searShow()" />
      <i v-show="!caret" class="el-icon-d-arrow-right" @click="noShow()" />
    </div>
  </div>
</template>

<script>
import picker from '@/components/Search/picker'
import { mapGetters } from 'vuex'

export default {
  mixins: [picker],
  props: {
    options: {
      type: Array,
      default: function() {
        return []
      }
    },
    searchSon: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 单据类型
    billtypeData: {
      type: Array,
      default: function() {
        return []
      }
    },
    searData1: { // 父传子搜索数据
      type: Array,
      default: function() {
        return []
      }
    },
    msg: {
      type: String,
      default: ''
    },
    msg2: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      conceal: 1, // 最多显示几条数据
      caret: true,
      searData: [{ fenglish: this.msg, val: '', fid: 7 }], // 搜索下拉框数据
      format: ['fdate', 'startDate', 'endDate', 'sd', 'ed', 'fcreateDate', 'fmodifyDate', 'fapproveDate', 'fforbidDate',
        'feffectivedate', 'fexpriydate', 'fcancelDate', 'fcloseDate', 'fdeliverydate', 'fbgdate'],
      formatLog: ['fcreatedate', 'fmodifydate', 'fapprovedate', 'fforbiddate', 'voucherdate'],
      closedisab: ['fforbidStatus', 'fforbidstatus', 'fclosestatus', 'fcloseStatus'],
      hunt: {}, // 搜索下拉框数据(向父传值)
      fdate: ['sd', 'ed'],
      fstatus: [
        { label: this.$t('market.all'), val: '' },
        { label: this.$t('market.create'), val: 'A' },
        { label: this.$t('market.state1'), val: 'B' },
        { label: this.$t('market.state3'), val: 'D' },
        { label: this.$t('market.state2'), val: 'C' },
        { label: this.$t('market.state6'), val: 'F' }
      ],
      bjfhData: [], // 中间 (比较)
      trueFalse: false
    }
  },
  computed: {
    ...mapGetters(['bjfhDatas'])
  },
  watch: {
    msg2() {
      this.noShow()
    },
    // 默认
    msg(val) {
      if (this.searData1.length === 0) this.searData[0].fenglish = val
    },
    searData1: {
      handler(val) {
        if (val.length > 0) {
          this.searData = val
          this.trueFalse = true
          this.gatherData()
        }
      },
      immediate: true
    },
    searchSon: { // 搜索数据
      handler(val) {
        if (val.length > 0) {
          this.searData = []
          val.forEach(res => {
            this.searData.push({
              fenglish: res.field,
              val: res.seach,
              fid: res.fid
            })
          })
        }
      },
      immediate: true
    }
  },
  created() {
    // vuex数据
    this.bjfhData = this.bjfhDatas
    // console.log(this.bjfhData)
  },
  methods: {
    clearData() {
      this.searData1 = []
    },
    // 下拉
    searShow() {
      if (this.searData.length < 2) {
        this.searData.push({ fenglish: '', val: '', fid: 7 })
      }
      this.caret = false
      this.conceal = 15
    },
    // 收回
    noShow() {
      this.caret = true
      this.conceal = 1
    },
    // 新增条件
    newSearch() {
      this.searData.push({ fenglish: '', val: '', fid: 7 })
    },
    // 删除条件
    delSear(index) {
      this.searData.splice(index, 1)
      this.gatherData()
    },
    // 向父组件传值
    gatherData(item, ev) {
      if (ev === 'clear') {
        item.val = ''
      }
      // 物料搜索记忆功能(树形bom维护)
      const path = this.$route.path === '/treeBom/:FNUMBER'
      if (item && path) {
        window.localStorage.setItem('fbillNo', item.fenglish)
      }
      this.hunt = []
      this.searData.forEach(item => {
        if (item.fenglish === 'fdocumentStatus') { // 审核状态
          item.status = 'fdocumentStatus'
          this.hunt.push({ field: item.status, seach: item.val, fid: item.fid })
        } else if (item.fenglish === 'isOutsourcing') { // 是否外购
          item.isOut = 'isOutsourcing'
          if (ev !== 0) { // 默认 否
            item.val = '0'
          }
          this.hunt.push({ field: item.isOut, seach: item.isOut, fid: item.fid })
        } else {
          this.hunt.push({ field: item.fenglish, seach: item.val || '', fid: item.fid })
        }
        this.$emit('seek', this.hunt)
      })
      this.trueFalse ? this.$emit('reload', this.hunt, 1) : ''
      this.trueFalse = false
    },
    handleSearch() {
      this.gatherData() // 获取搜索数据
      this.noShow() // 收回
      this.$emit('hand', '')
    }
  }
}
</script>
<style scoped lang="scss">
.active{
  border-radius: 3px;
  box-shadow: 0 0 3px #1e9fff;
}
.search{
  padding: 0 10px;
  padding-top: 5px;
  padding-left: 0;
  position: absolute;
  top: 0;
  width: 450px;
  background: #fff;
  z-index: 10;

  .el-icon-remove-outline{
    cursor: pointer;
    color: #1e9fff;
    margin-left: 0.16vw;
    padding-top: 0.46vh;
  }
  .hang{
    margin-bottom: 5px;
  }
  .el-input{
    width: 130px;
  }
  /** 左侧宽度 */
  &::v-deep .el-input.el-input--mini.el-input--suffix {
    width: 130px
  }
  /** 中间宽度 */
  .select2 {
    width: 80px;
    margin: 0 5px;
    &::v-deep .el-input.el-input--mini.el-input--suffix {
      width: 80px
    }
  }
  /** 右侧宽度 */
  .el-date-editor--daterange.el-input__inner, .el-input{
    width: 190px;
  }
  .selectStus::v-deep .el-input.el-input--mini.el-input--suffix{
    width: 190px
  }
  el-date-editor--datetimerange.el-input__inner, .el-input{
    width: 190px!important;
  }
  .posit{
    position: absolute;
    top: 10px;
    right: 12px;
    i{
      font-size: 14px;
      color: #737577;
    }
    .el-icon-d-arrow-left{
      transform: rotate(90deg);
    }
    .el-icon-d-arrow-right{
      transform: rotate(90deg);
    }
  }
  .posit:hover{
    box-shadow: 0 0 0.052vw #aaa;
  }
  .newSear{
    cursor: pointer;
    font-size: 12px;
    color: #409EFF;
    margin-bottom: 10px;
  }
}

</style>
